import React from 'react';
import { Modal } from 'antd';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { WeaTools } from 'ecCom';
import CrmMenu from './crm-menu';

@inject('crmPortalStore')
@observer
export default class CrmE9LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.onModeChange = this.onModeChange.bind(this);
  }

  render() {
    const { crmPortalStore } = this.props;
    const { leftMenu, leftMenuSelected, leftMenuType, leftMenuMode } = crmPortalStore;
    return (
      <div className="crm-e9aside-container">
        <CrmMenu
          ecId={`${this && this.props && this.props.ecId || ''}_CrmMenu@ez5gnz`}
          mode={leftMenuMode}
          needSwitch
          inlineWidth={197}
          verticalWidth={61}
          datas={toJS(leftMenu)}
          defaultSelectedKey={leftMenuSelected}
          onSelect={this.onSelect}
          onModeChange={this.onModeChange}
        />
      </div>
    );
  }

  onSelect(key, item, type) {
    const { crmPortalStore } = this.props;
    crmPortalStore.changeLeftMenuSelected(key);
    crmPortalStore.onLoadMain(item);
  }

  onModeChange(leftMenuMode) {
    const { crmPortalStore } = this.props;
    crmPortalStore.changeLeftMenuMode(leftMenuMode);
    const _width = leftMenuMode == 'inline' ? '197px' : '61px';
    document.querySelector('.crm-e9theme-layout-aside').style.width = _width;
    document.querySelector('.crm-e9theme-layout-main').style.marginLeft = _width;
  }
}
